<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      --c: #ff6b81;
    }
    svg {
      width: 200px;
      position: relative;
      z-index: 10;
    }
    #heart {
      fill: #eee;
      /* store属性可以用作线条、文字、元素，就像一个圆的轮廓 */
      stroke: var(--c);
      /* 线条宽度 */
      stroke-width: 40px;
      /* 设置线条为虚线，虚线的长度 */
      stroke-dasharray: 2600;
      /* 线条的位移，通过控制这个属性来描绘图形 */
      stroke-dashoffset: 2600;
      /* 画画时显示：线段两端为圆头 */
      stroke-linecap: round;
    }
    span {
      display: block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      /* 本身居中，scale是相对坐标刻度来进行变化的，为0则全部不显示，随者scale增大，元素本身和阴影都会增大，而且刻度变大了还会有一种弹出的效果 */
      transform: translate(-50%, -50%) scale(0);
      /* 设置多个圆点：水平、垂直、模糊度、颜色 */
      box-shadow: 0 -160px 0 var(--c),
        0 160px 0 var(--c),
        160px 0 0 var(--c),
        -160px 0 0 var(--c),
        120px -120px 0 var(--c),
        120px 120px 0 var(--c),
        -120px 120px 0 var(--c),
        -120px -120px 0 var(--c);
    }
    /* 复选框勾中时：画心（+：#checkbox的后一个兄弟） */
    #checkbox:checked+svg #heart {
      /* 线性、停留在最后一帧 */
      animation: drawHeart 1s linear forwards;
    }
    /* 复选框勾中时：弹出圆点（~：#checkbox的后所有兄弟） */
    #checkbox:checked ~ span{
      animation: blink 0.5s ease-in-out forwards;
      animation-delay: 0.85s;
    }
    /* 复选框勾中时：心跳动（+：#checkbox的后一个兄弟） */
    #checkbox:checked + svg{
      animation: beat 1s linear forwards;
    }
    label{
      cursor: pointer;
    }
    /* 画心动画 */
    @keyframes drawHeart {
      0% {
        stroke-dashoffset: 2600;
      }
      /* 80%轮廓已经快画完，但此时的颜色还是白的 */
      80% {
        fill: #eee;
        stroke-dashoffset: 0;
      }
      /* 剩下的20%显示显示红心 */
      100% {
        fill: var(--c);
      }
    }
    /* 小圆点弹出动画 */
    @keyframes blink {
      0%{
        transform: translate(-50%,-50%) scale(0.5);
        opacity: 0.8;
      }
      50%{
        transform: translate(-50%,-50%) scale(1);
        opacity: 1;
      }
      100%{
        transform: translate(-50%,-50%) scale(1.1);
        opacity: 0;
      }
    }
    /* 心跳动动画 */
    @keyframes beat {
      0%{
        transform: scale(1);
      }
      70%{
        transform: scale(1);
      }
      80%{
        transform: scale(1.2);
      }
      100%{
        transform: scale(1);
      }
    }
  </style>
</head>

<body>
  <label for="checkbox">
    <input type="checkbox" hidden id="checkbox">
    <!-- 注意：此处的svg需要绘制的起点要在底部，动画stroke-dasharray设置的起点是依据这个来的 -->
    <svg t="1667144308963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
      p-id="5712" >
      <!-- path规定动画的制作 -->
      <path
        d="M512 910.933333l-61.866667-56.32C230.4 655.36 85.333333 523.52 85.333333 362.666667 85.333333 230.826667 188.586667 128 320 128c74.24 0 145.493333 34.56 192 88.746667C558.506667 162.56 629.76 128 704 128 835.413333 128 938.666667 230.826667 938.666667 362.666667c0 160.853333-145.066667 292.693333-364.8 491.946666L512 910.933333z"
        p-id="5713" id="heart"></path>
    </svg>
    <span></span>
  </label>
</body>

</html>